import React, { lazy } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { Route, Switch, Redirect } from 'react-router-dom';
import * as utils from '../../../assets/js/utils/index';
import config from '../../../assets/js/conf/config';
import Css from '../../../assets/css/goods/details.css';

const GoodsDetailsItem = lazy(() => import('./details_item'));
const GoodsDetailsContent = lazy(() => import('./details_content'));
const GoodsDetailsReviews = lazy(() => import('./details_reviews'));

class GoodsDetails extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            aTabs: [
                { name: '商品', url: 'goods/details/item', checked: true },
                { name: '详情', url: 'goods/details/content', checked: false },
                { name: '评价', url: 'goods/details/reviews', checked: false }
            ],
            gid: !!props.location.search ? utils.localParam(this.props.location.search).search.gid : ''
        }
    }

    componentDidMount(){
        this.setTabStyle(this.props);
    }

    UNSAFE_componentWillReceiveProps(newProps){
        this.setTabStyle(newProps);
    }

    componentWillUnmount(){
        //页面卸载时，重写setState,避免内存溢出
        this.setState = (state, callback) => {
            return ;
        }
    }

    //切换tab
    tabCheckStatus(index, url){
        const aTemptabs = utils.deepClone(this.state.aTabs);
        aTemptabs.map(item => item.checked = false);
        aTemptabs[index].checked = true;
        this.setState({ aTabs: aTemptabs }, () => {
            this.goPage(url+'?gid='+this.state.gid);
        });
    }

    //路由切换
    goPage(url){
        this.props.history.replace(config.path+url);
    }

    //页面跳转
    pushPage(url){
        this.props.history.push(config.path+url);
    }
    
    //页面回退
    goBack(){
        this.props.history.goBack();
    }

    //设置选型卡切换样式
    setTabStyle(props){
        const aTemptabs = utils.deepClone(this.state.aTabs);
        aTemptabs.map(item => item.checked = false);
        switch(props.location.pathname){
            case config.path+'goods/details/item':
                aTemptabs[0].checked = true;
            break;
            case config.path+'goods/details/content':
                aTemptabs[1].checked = true;
            break;
            case config.path+'goods/details/reviews':
                aTemptabs[2].checked = true;
            break;
            default:
                aTemptabs[0].checked = true;
            break;
        }
        this.setState({ aTabs: aTemptabs });
    }

    render(){
        const { aTabs, gid } = this.state;
        const { aCartData } = this.props.cart;
        return(
            <div className={Css['details-wrapper']}>
                <div className={Css['details-header']}>
                    <div className={Css['back']} onClick={() => this.goBack()}></div>
                    <div className={Css['tab-wrap']}>
                        {
                            aTabs.length > 0 ? aTabs.map((item,index) => {
                                return (
                                    <div key={index} className={item.checked ? Css['tab-name'] +' '+Css['active'] : Css['tab-name']} onClick={() => this.tabCheckStatus(index, item.url)}>{item.name}</div>
                                )
                            }) : ''
                        }
                    </div>
                    <div className={Css['card-icon']} id='cardIcon' onClick={() => this.pushPage('home/cart')}>
                        <div className={aCartData.length > 0 ? Css['spot'] : Css['spot']+' hide'}></div>
                    </div>
                </div>
                <div className={Css['sub-page']}>
                    <Switch>
                        <Route path={config.path+'goods/details/item'} component={GoodsDetailsItem}></Route>
                        <Route path={config.path+'goods/details/content'} component={GoodsDetailsContent}></Route>
                        <Route path={config.path+'goods/details/reviews'} component={GoodsDetailsReviews}></Route>
                        <Redirect to={config.path+'goods/details/item'}></Redirect>
                    </Switch>
                </div>
            </div>
        )
    }
}

export default connect((store) => {
    return store;
})(withRouter(GoodsDetails));
